<template>
    <div>
        <div v-if="!isMobile">
            <div class="home" v-if="rulePage">
                <div class="page1">
                    <!-- 顶部菜单 -->
                    <div class="menu">
                        <ul class="menu-ul">
                            <li>
                                <span class="s1">邪七学习{{ isMobile }}</span>
                                <span class="s2">ENGLISH WORDS</span>
                            </li>
                            <li>
                                <span class="s1">真正用心</span>
                                <span class="s2">ENGLISH WORDS</span>
                            </li>
                            <li>
                                <span class="s1">持续优化</span>
                                <span class="s2">ENGLISH WORDS</span>
                            </li>
                            <li>
                                <span class="s1">持续更新</span>
                                <span class="s2">ENGLISH WORDS</span>
                            </li>
                        </ul>
                    </div>
                    <div class="biaoti">
                        <h1 class="vintage">邪 七 学 习</h1>
                        <div class="miaoshu">
                            <span>版本修复</span>
                            <span>版本修改</span>
                            <span>高级假人</span>
                        </div>
                        <div class="miaoshu">
                            <span>添加地图</span>
                            <span>添加装备</span>
                            <span>添加怪物</span>
                        </div>
                        <div class="miaoshu">
                            <span>插件添加</span>
                            <span>插件转换</span>
                            <span>做大背包</span>
                        </div>
                    </div>
                    <div class="shuoming">本站所有内容皆本人精心学习修复、持续更新！</div>
                    <!-- 鼠标 -->
                    <div class="mouseTips tiaodong" @click="nextPage"></div>
                </div>
                <div class="page2" ref="page2">
                    <div class="main">
                        <el-row style="margin-bottom:20px" :gutter="10">
                            <el-col :span="6">
                                <el-input
                                    placeholder="请输入要搜索的内容"
                                    v-model="serachVal"
                                    clearable
                                    @keyup.enter.native="getBbkData"
                                    @clear="getBbkData"
                                ></el-input>
                            </el-col>
                            <el-col :span="18">
                                <el-button
                                    type="primary"
                                    @click="getBbkData"
                                    style="margin-right:20px"
                                >搜索</el-button>
                                <el-checkbox v-model="isGom" @change="getBbkData">GOM</el-checkbox>
                                <el-checkbox v-model="isGee" @change="getBbkData">GEE</el-checkbox>
                                <el-checkbox v-model="isOther" @change="getBbkData">其他引擎</el-checkbox>
                                <span
                                    class="link-span"
                                    @click="goLink('http://www.xieqi.vip/dbb/')"
                                >
                                    代做大背包30M，点我选材
                                    <img src="~@/assets/click.gif" class="coupon-icon" />
                                </span>
                            </el-col>
                        </el-row>
                        <el-table
                            :data="itemLists"
                            style="width: 100%"
                            max-height="655px"
                            v-loading="serachLoading"
                            :empty-text="emptyText"
                        >
                            <el-table-column prop="bbUpdate" label="更新日期" width="130">
                                <template slot-scope="scope">
                                    <span
                                        style="color: green;font-weight:bold"
                                        @dblclick="dbClick(scope.row)"
                                    >{{scope.row.bbUpdate}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="bbUpdate" label="大小" width="65" align="center">
                                <template slot-scope="scope">
                                    <span
                                        style="color: #eda64e;font-weight:bold"
                                    >{{scope.row.bbName}}M</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="bbDesc" label="学习资料详情">
                                <template slot-scope="scope">
                                    <span
                                        style="color: red;font-weight:bold;cursor: pointer;"
                                        @click="showUrl(scope.row)"
                                    >【{{ scope.row.bbEngine.toUpperCase() }}】{{scope.row.bbDesc}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="bbDesc"
                                label="更新说明"
                                width="300"
                                show-overflow-tooltip
                            >
                                <template slot-scope="scope">
                                    <span
                                        style="color: red;font-weight:bold;cursor: pointer;"
                                        @click="showUrl(scope.row)"
                                    >{{scope.row.bbUpdateInfo}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- <br clear="all" /> -->
                    </div>
                    <div class="bottom"></div>
                </div>
                <div class="foot">
                    <p style="color:#409eff">邪七学习库（www.xieqi.vip）</p>
                    <p>
                        Copyright © 2016- 2020
                        <a
                            href="https://beian.miit.gov.cn/"
                            target="_blank"
                        >湘ICP备2020022730号-1</a> All Rights Reserved.
                    </p>
                </div>
                <!-- 播放音乐 -->
                <audio
                    class="autoplay"
                    controls="controls"
                    autoplay="autoplay"
                    ref="audio"
                    style="opacity: 0;position: fixed;left: 0;top: 0;"
                >
                    <source src="./music.mp3" type="audio/mpeg" />
                </audio>
                <button
                    style="opacity: 0;position: fixed;left: 0;top: 0;"
                    ref="playVid"
                    @click="playVid"
                ></button>
                <div id="Floatingbar">
                    <ul>
                        <li>
                            <span @click="goRouter">邪七学习</span>
                        </li>
                        <li>
                            <span @click="lianxiQQ">持续修复</span>
                        </li>
                        <li>
                            <span @click="lianxiQQ">更新通知</span>
                        </li>
                        <li>
                            <span @click="playVid">开关音乐</span>
                        </li>
                        <li>
                            <span @click="goLink('https://docs.qq.com/doc/DUGxKSU9hb294d3Vy')">架设教程</span>
                        </li>
                        <li>
                            <span @click="lianxiQQ('qq')">联系站长</span>
                        </li>
                        <li>
                            <span @click="backTop">回到顶部</span>
                        </li>
                    </ul>
                </div>
                <Snowf
                    :amount="50"
                    :size="20"
                    :speed="1.5"
                    :wind="0"
                    :opacity="0.8"
                    :swing="1"
                    :image="flake"
                    :zIndex="null"
                    :resize="true"
                    color="#fff"
                />
            </div>
            <div
                v-else
                style="color:#fff;font-size:30px;text-align: center;margin-top:50px"
            >请勿通过第三方扒站软件扒站！需要模板联系QQ：2152860</div>
        </div>
        <div v-else>
            <!-- <div v-if="rulePage"></div> -->
            <div v-if="!homeInfo" class="mobile-page">
                <!-- <div class="not-rulePage">移动端紧急开发中！制作QQ：2152860</div> -->
                <div class="top">
                    <el-row class="search-div">
                        <el-input
                            placeholder="请输入要搜索的内容"
                            v-model="serachVal"
                            clearable
                            @keyup.enter.native="getBbkData"
                            @clear="getBbkData"
                            class="search-input"
                        ></el-input>
                        <el-button type="primary" @click="getBbkData">搜索</el-button>
                    </el-row>
                    <el-row class="search-div checkbox">
                        <el-checkbox v-model="isGom" @change="getBbkData">GOM</el-checkbox>
                        <el-checkbox v-model="isGee" @change="getBbkData">GEE</el-checkbox>
                        <el-checkbox v-model="isOther" @change="getBbkData">其他引擎</el-checkbox>
                    </el-row>
                </div>
                <div class="content">
                    <el-collapse v-model="activeName" accordion v-if="itemLists.length > 0">
                        <el-collapse-item v-for="(item,inx) of itemLists" :key="inx" :name="inx">
                            <div
                                slot="title"
                                class="mobile-title"
                            >【{{ item.bbEngine.toUpperCase() }}】{{item.bbDesc}}</div>
                            <div class="bbUpdate">更新日期：{{item.bbUpdate}}</div>
                            <div class="bbUpdateInfo">更新说明：{{item.bbUpdateInfo}}</div>
                            <div class="bbSize">资料大小：{{item.bbName}}M</div>
                            <div class="bbDesc" @click="showUrl(item)">资料详情：{{item.bbDesc}}</div>
                        </el-collapse-item>
                    </el-collapse>
                    <el-collapse accordion v-else class="not-data">
                        <el-collapse-item disabled>
                            <div slot="title" class="not-data-title">没有搜索到数据，请更换搜索条件</div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
            <div v-else class="not-rulePage">请勿通过第三方扒站软件扒站！需要模板联系QQ：2152860</div>
        </div>
        <!-- 网站声明 -->
        <el-dialog
            :visible.sync="homeInfo"
            :width="!isMobile ? '40%' : '90%'"
            :top="!isMobile ? '15vh' : '5vh'"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
        >
            <div slot="title" style="text-align: center;font-size: 18px;">学习库声明</div>
            <div class="mb-10">
                (1)本站仅为个人建站学习，其内容的皆为MOCK数据，本站不向用户提供的外部链接的准确性和完整性做保证，该外部链接指向的不由本站实际控制的任何网页上的内容，
                本网站对其合法性亦概不负责，亦不承担任何法律责任，本站内所有内容亦不表明本网站之观点或意见，再此声明，所有数据均为学习MOCK数据不涉及任何商业用途。
            </div>
            <div
                class="mb-10"
            >(2)本网站属于个人的非赢利性网站，所有数据均为学习MOCK数据不涉及任何商业用途，如有涉及纠纷相关问题，可在线联系作者删除MOCK数据！！！</div>
            <div
                class="mb-10"
            >(3)本网站所发内容版权均归原作者所有，如其他媒体、网站或个人从本网下载使用，请在转载有关文章时务必尊重该文章的著作权，保留本网注明的“稿件来源”，并自负版权等法律责任。</div>
            <div class="mb-10">
                <span style="margin-right: 5px;color: red;">※</span>本声明未涉及的问题参见国家有关法律法规，当本声明与国家法律法规冲突时，以国家法律法规为准。
            </div>
            <div class="mb-10">
                <span style="margin-right: 5px;color: red;">※</span>本网站如无意中侵犯了哪个媒体或个人的知识产权，请联系QQ：2152860，本网站将立即给予删除。
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button>取 消(停留当前)</el-button>
                <el-button type="primary" @click="goHome">已 阅(进入首页)</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// @ is an alias to /src
import Snowf from "vue-snowf";
import flake from "../styles/img/flake.png";
import { getBbkData, getRule } from "@/api/api.js";
export default {
    components: {
        Snowf,
    },
    name: "home",
    data() {
        return {
            rulePage: true,
            flake: flake,
            itemLists: [],
            homeInfo: true,
            isPlayVid: false,
            serachVal: "",
            isGom: true,
            isGee: true,
            isOther: true,
            serachLoading: false,
            emptyText: "没有搜索到数据，请更换搜索条件",
            isMobile: null,
            activeName: "",
            currentTab: "all",
        };
    },
    mounted() {
        this.getRule();
        this.isMobile = this._isMobile();
    },
    methods: {
        _isMobile() {
            let flag = navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
            );
            return flag;
        },
        async getRule() {
            let data = await getRule();
            if (
                data.indexOf(location.hostname) != -1 ||
                location.host == "localhost:8080"
            ) {
                this.getBbkData();
                this.rulePage = true;
            } else {
                this.rulePage = false;
            }
        },
        handleClick() {},
        formatPhotoUrl: (url) => {
            return url;
        },
        dbClick(row) {
            localStorage.setItem("row", JSON.stringify(row));
            alert("策划中！有啥奇妙想法联系QQ：2152860");
        },
        goRouter() {
            this.$router.push("/about");
        },
        goHome() {
            this.homeInfo = false;
            if (!this.isMobile) {
                this.$nextTick(() => {
                    this.$refs.playVid.click();
                });
            }
        },
        playVid() {
            this.isPlayVid = !this.isPlayVid;
            if (this.isPlayVid) {
                this.$refs.audio.play();
            } else {
                this.$refs.audio.pause();
            }
        },
        // 获取数据
        async getBbkData() {
            this.serachLoading = true;
            let res = await getBbkData({
                isGom: this.isGom,
                isGee: this.isGee,
                isOther: this.isOther,
                serachVal: this.serachVal,
            });
            this.serachLoading = false;
            if (res.isOk) {
                this.itemLists = res.data;
            } else {
                this.$messagebox.error("加载数据失败，请CTRL+F5刷新网站！");
            }
        },
        // 查看详情
        showUrl(item) {
            if (item.showUrl) {
                if (!this.isMobile) {
                    this.$confirm('腾讯文档为外部导航，与本库无关，是否确认导航到腾讯文档查看学习记录?', '学习库导航', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        window.open(item.showUrl);
                    }).catch(() => {
                           
                    });
                    
                } else {
                    location.href = item.showUrl;
                }
            } else {
                location.href = item.showWeb;
            }
        },
        // 点击鼠标下一页
        nextPage() {
            var timer = setInterval(() => {
                let osTop =
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;
                document.documentElement.scrollTop = document.body.scrollTop =
                    osTop + 60;
                if (osTop >= 860) {
                    clearInterval(timer);
                }
            }, 30);
        },
        goLink(url) {
            window.open(url);
        },
        // 联系QQ
        lianxiQQ(target) {
            if (target == "qq") {
                // 联系Q
                window.open(
                    "tencent://message/?uin=2152860&Site=QQ交谈bai&Menu=yes"
                );
            } else {
                // 加群
                window.open("https://jq.qq.com/?_wv=1027&k=kfpA8YiP");
            }
        },
        // backTop
        backTop() {
            var timer = setInterval(function () {
                let osTop =
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;
                let ispeed = Math.floor(-osTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop =
                    osTop + ispeed;
                if (osTop === 0) {
                    clearInterval(timer);
                }
            }, 30);
        },
    },
};
</script>
<style lang="scss" scoped>
@import "@/styles/css/home.scss";
</style>
